import { FC } from "react";
import { UsergroupAddOutlined } from "@ant-design/icons";
import { Form, Input, Button } from "antd";
import { Link } from "react-router-dom";
import { LOGIN_PATHNAME } from "../router";

const Register: FC = () => {
  const [form] = Form.useForm();

  const onFinish = (values: unknown) => {
    console.log("Success:", values);
  };

  return (
    <div className="h-full flex items-center justify-center">
      <div className="w-[260px]">
        <h2 className="font-bold text-center">
          <UsergroupAddOutlined className="text-2xl mr-1" />
          注册用户
        </h2>
        <Form form={form} labelCol={{ span: 8 }} onFinish={onFinish}>
          <Form.Item
            label="用户名："
            name="username"
            rules={[
              { required: true, message: "请输入用户名" },
              { type: "string", min: 5, max: 20, message: "字符在5-20之间" },
              { pattern: /^\w+$/, message: "只能是字母数字下划线" },
            ]}
          >
            <Input placeholder="请输入用户名" />
          </Form.Item>
          <Form.Item label="密码：" name="pwd" rules={[{ required: true, message: "请输入密码" }]}>
            <Input.Password placeholder="请输入密码" />
          </Form.Item>
          <Form.Item
            label="确定密码："
            name="surepwd"
            dependencies={["pwd"]}
            rules={[
              { required: true, message: "请输入确定密码" },
              ({ getFieldValue }) => ({
                validator(_, value) {
                  if (!value || getFieldValue("pwd") === value) {
                    return Promise.resolve();
                  } else {
                    return Promise.reject("密码与确定密码不一致");
                  }
                },
              }),
            ]}
          >
            <Input.Password placeholder="请输入确定密码" />
          </Form.Item>
          <Form.Item label="昵称：" name="nickname">
            <Input placeholder="请输入昵称" />
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 6 }}>
            <Button type="primary" htmlType="submit">
              注册
            </Button>
            <Link className="ml-2" to={LOGIN_PATHNAME}>
              已有账号，登录
            </Link>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

export default Register;
